/** matches */
/*
matches 方法是用于检查元素是否与指定的选择器匹配的 DOM 方法。
这个方法接受一个 CSS 选择器作为参数，用于检查元素是否匹配该选择器。
*/
const element = document.getElementById('myElement');
if (element.matches('.myClass')) {
    // 如果元素匹配选择器'.myClass'，执行相应的逻辑
} else {
    // 如果元素不匹配选择器'.myClass'，执行其他逻辑
}

// 元素的子元素数量：

const parentElement = document.getElementById('parentElementId');
const childElementCount = parentElement.childElementCount;
console.log(childElementCount); // 输出子元素数量

// 指向第一个子元素

const parentElement1 = document.getElementById('parentElementId');
const firstChild = parentElement1.firstElementChild;
console.log(firstChild); // 输出第一个子元素

// 指向最后一个子元素

const parentElement2 = document.getElementById('parentElementId');
const firstChil2 = parentElement2.lastElementChild;
console.log(firstChild2); // 输出第一个子元素

//指向前一个元素
const element3 = document.getElementById('myElement');
const previousSibling = element3.previousElementSibling;
console.log(previousSibling); // 输出前一个兄弟元素

//指向后一个元素
const element4 = document.getElementById('myElement');
const previousSibling2 = element4.nextElementSibling;
console.log(previousSibling2); // 输出前一个兄弟元素

/**css类扩展 */
/* 
classList.add 方法可以用来为指定的元素添加一个新的 CSS 类，这样就可以扩展元素的样式。
*/
// getElementsByClassName,获取class元素相同的节点
const element5 = document.getElementById('myElement');
element5.classList.add('newClass');//contains(value)检查value是否存在,remove(value)移出value,toggle(value)若存在则删除。若不存在，则添加

/**焦点管理 */
// 你可以使用document.activeElement来获取当前具有焦点的元素，使用element.focus()来设置某个元素获取焦点。
let element6=document.activeElement
element6.focus()

/**readyState属性 */
// document.readyState 属性可以用来获取当前文档的加载状态，它有以下几个可能的取值：
// "loading"：文档正在加载中
// "interactive"：文档已经完成加载，正在解析
// "complete"：文档已经解析完成，所有资源（例如图片、样式表等）也已经加载完成

/**scrollIntoView */
// scrollIntoView 是一个 JavaScript 方法，用于将某个元素滚动到可视区域内。当调用一个元素的 scrollIntoView 方法时，浏览器会自动滚动页面，以确保该元素在可视区域内可见。
// 获取需要滚动到可视区域的元素
const element7 = document.getElementById('yourElementId');
// 将该元素滚动到可视区域内
element7.scrollIntoView();